<template>
    <div>
        <el-button type="primary" @click="dialogVisible = true">新增请假</el-button>
        <el-dialog v-model="dialogVisible" title="新增请假" width="50%">

            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                class="demo-ruleForm">
                <el-form-item label="请假理由" prop="pass">
                    <el-input v-model="ruleForm.pass" />
                </el-form-item>
                <el-form-item label="开始时间" prop="start">
                    <el-date-picker v-model="ruleForm.start" type="date" placeholder="开始时间" />
                </el-form-item>
                <el-form-item label="结束时间" prop="end">
                    <el-date-picker v-model="ruleForm.end" type="date" placeholder="结束时间" />
                </el-form-item>
                <el-form-item label="附件" prop="extend">
                    <el-input v-model="ruleForm.extend" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">

import { reactive, ref, defineEmits } from 'vue';

import type { FormInstance } from 'element-plus';

import { addLeve } from '@/server/leveServer';

const emits = defineEmits(['addleveList'])


const dialogVisible = ref(false)

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
    pass: '',
    start: '',
    end: '',
    extend: ''
})

const validatePass2 = (rule: any, value: any, callback: any) => {
    console.log(ruleForm.start);
    let time = new Date(ruleForm.start)
    let end = new Date(value)
    console.log(value);
    if (value == null || value == '') {
        callback(new Error("结束时间不能为空"))
    }
    else if (end < time) {
        callback(new Error("结束时间要大于开始时间"))
    } else {
        callback()
    }
}

// 校验规则
const rules = reactive({
    pass: [
        { required: true, message: '请假理由不能为空', trigger: 'blur' },

    ],
    start: [
        {
            type: 'date',
            required: true,
            message: '开始时间不能为空',
            trigger: 'change'
        },

    ],
    end: [
        {
            type: 'date',
            trigger: 'change',
            validator: validatePass2,

        },

    ],


})



const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            console.log(ruleForm);
            const res = await addLeve({
                reason: ruleForm.pass,
                start: ruleForm.start,
                end: ruleForm.end,
                extend: ruleForm.extend
            })
            console.log(res.data.data);

            emits('addleveList',res.data.data)

            dialogVisible.value = false
            formEl.resetFields()
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    dialogVisible.value = false
    if (!formEl) return
    formEl.resetFields()

}




</script>

<style scoped>

</style>